<template>
	<view class="my-order">
		<view class="menu-top">
			<u-tabs-swiper ref="uTabs" height="110" bar-height="8" bar-width="34" :list="list" :current="current"
				@change="tabsChange" :is-scroll="false" swiperWidth="750" active-color="#141414"
				inactive-color="#656460"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" style="height100%" :disable-touch="touch" :current="swiperCurrent"
			@transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>
			
			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view :refresher-threshold="100" :scroll-y="scrollY" style="width: 100%;height: 100%;" @scroll="scroll"
					@scrolltoupper="toupper" refresher-background="#F9F9F9" @scrolltolower="onreachBottom"
					:refresher-enabled="enabled" @refresherpulling="refresher" :refresher-triggered="refreshLoad">
					<lw-order-list @cancel="canOrder" @delete="delOrder" @confirm="affOrder" :list="orderList" :status="status"
						:parentId="parent_id" :show="show" :showLoad="showload"></lw-order-list>
				</scroll-view>
			</swiper-item>

		</swiper>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: false,
				enabled: true,
				touch: false,
				scrollY: true,
				refreshing: false, // 刷新中
				refreshLoad: false,
				showload: false,
				show: false,
				slipping: false,
				parent_id: 0,
				status: 'loadmore',
				page: 0,
				loadStatus: false,
				list: [{
						name: '全部'
					}, {
						name: '待付款'
					}, {
						name: '待付尾款'
					}, {
						name: '待发货'
					},{
						name: '待收货'
					},{
						name: '已完成'
					},{
						name: '已取消'
					}
				],
				orderList: [],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
			}
		},
		onLoad(options) {
			if (options.current) {
				this.current = options.current
				this.swiperCurrent = options.current
			}
			if (options.parent_id) {
				this.parent_id = options.parent_id
			}
			// #ifdef APP-PLUS || H5
			this.touch = true
			// #endif
			if (!uni.getStorageSync('userInfo')) {
				uni.showModal({
					title: '温馨提示',
					content: '请先登录后查看订单',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
				return
			}
			this.getData()
		},
		onShow() {

		},
		methods: {
			getData() {
				let data = {
					limit: 10,
					page: this.page
				}
				if (this.parent_id != 0) data.parent_id = this.parent_id
				switch (Number(this.swiperCurrent)) {
					case 1:
						data.order_status = 0;
						data.shipping_status = 0;
						data.pay_status = 0;
						break;
					case 2:
						data.order_status = 0;
						data.shipping_status = 0;
						data.pay_status = 3;
						break;
					case 3:
						data.order_status = 0;
						data.shipping_status = 0;
						data.pay_status = 2;
						break;
					case 4:
						data.order_status = 0;
						data.shipping_status = 1;
						data.pay_status = 2;
						break;
					case 5:
						data.order_status = 1;
						data.shipping_status = 2;
						data.pay_status = 2;
						break;
					case 6:
						data.order_status = 2;
						break;
				}

				this.$u.apiWei.orderList(data).then(res => {
					this.show = true
					if (res.datas.data.length == 10) {
						this.loadStatus = true
					} else {
						this.loadStatus = false
					}
					res.datas.data.forEach((item) => {
						this.orderList.push(item)
					})
					this.showload = false
				})

			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.show = false
				this.showload = false
				if (index != 0) {
					this.addFoot('我的-订单列表-' + this.list[index].name)
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				if (this.slipping) {
					let dx = e.detail.dx;
					this.$refs.uTabs.setDx(dx);
				}
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				this.slipping = true
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.loadStatus = false
				this.page = 0
				this.orderList = []
				this.getData()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.showload = true
				setTimeout(() => {
					this.status = 'loading';
					setTimeout(() => {
						this.status = 'nomore';
					}, 1000)
					if (!this.loadStatus) return;
					this.page++
					this.getData()
				}, 400)
			},
			scroll() {
				// #ifdef APP-PLUS || H5
				this.scrollTop = true
				//console.log('scroll')
				// #endif
			},
			toupper() {
				// #ifdef APP-PLUS || H5
				setTimeout(() => {
					this.scrollTop = false
				}, 100);
				// #endif
			},
			refresher() {
				if (this.refreshing) return
				this.refreshing = true
				this.refreshLoad = true

				// #ifdef APP-PLUS || H5
				setTimeout(() => {
					setTimeout(() => {
						this.refreshLoad = false
						this.refreshing = false
					}, 500);
					if (this.scrollTop) return
					this.orderList = []
					this.loadStatus = false
					this.page = 0
					this.getData()
				}, 800);
				// #endif

				// #ifdef MP-WEIXIN
				this.orderList = []
				this.loadStatus = false
				this.page = 0
				this.getData()
				setTimeout(() => {
					this.refreshLoad = false
					this.refreshing = false
				}, 1000);
				// #endif
			},
			delOrder(index) {
				this.orderList.splice(index, 1);
			},
			canOrder(index) {
				this.orderList[index].order_status = 2
				this.orderList[index].status_name = "已取消"
			},
			affOrder(index) {
				this.orderList[index].order_status = 1
				this.orderList[index].shipping_status = 2
				this.orderList[index].pay_status = 2
				this.orderList[index].status_name = "已完成"
			},
			addFoot(where) {
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).store_id : '',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.my-order {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;

		.menu-top {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}

	.order-list {
		margin-top: 30rpx;

		.order-item {
			margin-top: 30rpx;
			padding: 30rpx 40rpx;
			width: 100%;
			background: #fff;
			box-sizing: border-box;


			&:first-child {
				margin-top: 0;
			}

			.order-header {
				display: flex;
			}

			.order-header text {
				display: block;
				flex: 1;

			}

			.order-header text:first-child {
				line-height: 28rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				text-align: left;
			}

			.order-header text:last-child {
				line-height: 28rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #141414;
				text-align: right;
			}

			.order-list-content {
				margin-top: 80rpx;
			}

			.goods-info {
				display: flex;
			}

			.goods-info image {
				display: block;
				width: 176rpx;
				height: 176rpx;
				border-radius: 4rpx;
			}

			.goods-text {
				padding-left: 30rpx;
				flex: 1;
			}

			.goods-name {
				width: 460rpx;
				line-height: 26rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #141414;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.goods-price {
				margin-top: 36rpx;
				line-height: 28rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
			}

			.goods-price text {
				font-size: 20rpx;
			}

			.goods-sku {
				margin-top: 46rpx;
				line-height: 30rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #757575;
			}

			.goods-total {
				margin-top: 64rpx;
				line-height: 26rpx;
				font-size: 26rpx;
				text-align: right;
				font-weight: bold;
				color: #141414;
			}

			.goods-total text:first-child {
				font-weight: normal;
			}

			.goods-total text:last-child {
				font-size: 18rpx;
			}

			.line {
				margin: 48rpx 0 40rpx 0;
				width: 100%;
				height: 2rpx;
				background: #F5F5F5;
			}

			.menu-bottom {
				display: flex;
				flex-direction: row-reverse;
				box-sizing: border-box;

				.btn-view {
					width: 140rpx;
					margin-right: 28rpx;
				}

				.u-size-medium {
					padding: 0 22rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 24rpx;
				}

				.btn-view:first-child {
					margin-right: 0;
				}
			}

		}
	}

	.swiper-box {
		flex: 1;
		padding-top: 110rpx;
	}

	.swiper-item {
		height: 100%;
	}
</style>